<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/layui/css/layui.css?t=1616353046768" media="all">
    <script src="/layui/layui.js?t=1616353046768"></script>
</head>

<body class="pear-container">

<table class="layui-hide" id="demo" lay-filter="role-table"></table>
<table class="layui-hide" id="test" lay-filter="role-bar"></table>

<script type="text/html" id="role-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>

<script type="text/html" id="role-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" style="color: lightpink">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    {if in_array("article_delete",$userInfo)}
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" style="color: darkred">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
    {/if}
</script>

</body>
</html>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','jquery'], function() {
        var laydate = layui.laydate, //日期
            layer = layui.layer, //弹层
            table = layui.table, //表格
            element = layui.element, //元素操作
            $ = layui.jquery;
        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //let MODULE_PATH = "/";

        //执行一个 table 实例
        table.render({
            elem: '#demo',
            page: true, //开启分页
            height: 420,
            limit : 5,
            limits : [5,10,15],
            url: "{:url('article/queryArticle')}", //数据接口
            title: '用户表',
            toolbar: '#role-toolbar', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            cols: [[ //表头
                {field: 'title', title: '标题'},
                {field: 'author', title: '作者'},
                {field: 'date', title: '发布时间', sort: true},
                {field: 'content', title: '文章摘要'},
                {field: 'reading', title: '阅读次数', sort: true},
                {field: 'collection', title: '收藏次数', sort: true},
                {fixed: 'right', title: "操作", width: 165, align: 'center', toolbar: '#role-bar'},
            ]]
        });

        table.on('toolbar(role-table)', function(obj){
            if(obj.event === 'add'){
                window.add();
            }
        });

        table.on('tool(role-table)', function(obj){
            if(obj.event === 'edit'){
                window.edit(obj);
            }
            {if in_array("article_delete",$userInfo)}
                else if(obj.event === 'remove'){
                        window.remove(obj);
                 }
            {/if}
        });

        window.add = function(){
            layer.open({
                type: 2,
                title: "增加",
                shade: 0.1,
                area: ['800px', '600px'],
                content: 'add.html'
            });

        };

        window.edit = function(obj){
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['1000px', '600px'],
                content:  'edit.html?id='+obj.data.id
            });
        };


        {if in_array("article_delete",$userInfo)}
                window.remove = function(obj){
                    let id = obj.data.id;
                    $.ajax({
                        url : "deleteArticle?id=" + id,
                        type : "GET",
                        dataType : "json",
                        success (res) {
                            console.info(res);
                            layer.msg(res.message);
                            setTimeout(function(){
                                window.parent.location.reload()
                            },3000);
                        }
                    });
                }
        {/if}
    });
</script>
